<script setup lang="ts">
import { ref, computed } from 'vue'

const text = ref('')

const charCount = computed(() => text.value.length)
const wordCount = computed(() => {
  const t = text.value.trim()
  if (!t) return 0
  // 按空白分词，适配中英文
  return t.split(/\s+/).filter(Boolean).length
})
const sentenceCount = computed(() => {
  const matches = text.value
    .replace(/\n/g, ' ')
    .match(/[^.!?。！？]+[.!?。！？]?/g)
  return matches ? matches.filter((s) => s.trim()).length : 0
})
</script>

<template>
  <div class="space-y-4">
    <div>
      <label class="block text-sm font-medium mb-1">输入文本：</label>
      <textarea
        v-model="text"
        class="w-full h-40 p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none"
        placeholder="在这里输入或粘贴文本..."
      ></textarea>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
        <p class="text-sm text-gray-500 dark:text-gray-400">字符数（含空格）</p>
        <p class="text-2xl font-bold text-primary">{{ charCount }}</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
        <p class="text-sm text-gray-500 dark:text-gray-400">单词数</p>
        <p class="text-2xl font-bold text-secondary">{{ wordCount }}</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
        <p class="text-sm text-gray-500 dark:text-gray-400">句子数</p>
        <p class="text-2xl font-bold text-accent">{{ sentenceCount }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped></style>